<template>
    <div class="pageCon">


        <div class="topBox"></div>
        <div class="userInfo">
            <img src="../../assets/advMobile/geren/userImg.png" @click="clearHandle" alt="">
            <div v-if="userName != ''">{{ userName }}</div>
        </div>

        <div class="navItemBox" @click="getMyList" v-if="userTag == 0">
            <div>

                <div class='navImgBox navImgBox1'>
                    <img src="../../assets/advMobile/geren/toufang.png" alt="">
                </div>
                <div>
                    <span>意向单</span>
                    <span>查看我的意向单</span>
                </div>
            </div>
            <div></div>
        </div>

        <template v-if="userTag == -2">

            <div class="navItemBox" @click="getMyList">
                <div>
                    <div class='navImgBox navImgBox2'>
                        <img src="../../assets/advMobile/geren/tongji.png" alt="">
                    </div>
                    <div>
                        <span>意向单</span>
                        <span>查看您的客户意向单</span>
                    </div>
                </div>
                <div></div>
            </div>
            <div class="navItemBox" @click="getMyCode">
                <div>
                    <div class='navImgBox navImgBox2'>
                        <img src="../../assets/advMobile/geren/toufang.png" alt="">
                    </div>
                    <div>
                        <span>邀请码</span>
                        <span>查看您的邀请码</span>
                    </div>
                </div>
                <div></div>
            </div>
            <div class="navItemBox" @click="resCode">
                <div>
                    <div class='navImgBox navImgBox2'>
                        <img src="../../assets/advMobile/geren/yujing.png" alt="">
                    </div>
                    <div>
                        <span>修改密码</span>
                        <span>重置您的密码</span>
                    </div>
                </div>
                <div></div>
            </div>

        </template>


        <template v-if="userTag == -3">
            <!-- 数据统计 -->
            <div class="dataBox">
                <div class="dataTop">
                    <img src="../../assets/advMobile/geren/tongji.png" alt=""> 数据统计
                </div>
                <div class="dataCon">
                    <div>
                        安装总数
                        <span>{{ shopTotal }}家</span>
                    </div>
                    <div>
                        账户余额
                        <span>{{ totalMoney }}元</span>
                        <span class="shenqingBtn" @click="tiHandle">提现</span>
                    </div>
                </div>
            </div>

            <div class="navItemBox" @click="getuserData('anZhuang')">
                <div>
                    <div class='navImgBox'>
                        <img src="../../assets/advMobile/geren/toufang.png" alt="">
                    </div>
                    <div>
                        <span>安装记录</span>
                        <span>查看您的安装记录</span>
                    </div>
                </div>
                <div></div>
            </div>
            <div class="navItemBox" @click="getuserData('money')">
                <div>
                    <div class='navImgBox'>
                        <img src="../../assets/advMobile/geren/yujing.png" alt="">
                    </div>
                    <div>
                        <span>佣金记录</span>
                        <span>查看您的佣金记录</span>
                    </div>
                </div>
                <div></div>
            </div>
            <!-- <div class="navItemBox" @click="getuserData('money')">
                <div>
                    <div class='navImgBox'>
                        <img src="../../assets/advMobile/geren/yujing.png" alt="">
                    </div>
                    <div>
                        <span>所有安装门店</span>
                        <span>查看您的佣金记录</span>
                    </div>
                </div>
                <div></div>
            </div> -->
        </template>

        <!-- 投放按钮   导航栏 -->
        <div class="pageBottomBox">
            <!-- 导航栏 -->
            <div class="navBox">
                <div @click="toPage">
                    <img src="../../assets/advMobile/navIcon/home1.png" alt="">
                    主页
                </div>

                <div>
                    <img src="../../assets/advMobile/navIcon/geren2.png" alt="">
                    我的
                </div>
            </div>
        </div>
        <!-- 投放 -->
        <div :class="sheetDia ? ' touBox' : 'hidenTouBox'" @click="popTou">
            <div :class="touFlag == 10 || touFlag == 11 ? 'resultCon touCon' : 'touCon'" @click.stop="popN">
                <div class="touTop">
                    <span v-if="touFlag == 3">意向单</span>
                    <span v-else-if="touFlag == 4">投放店铺</span>
                    <span v-else-if="touFlag == 6">店铺详情</span>
                    <span v-else-if="touFlag == 7">安装记录</span>
                    <span v-else-if="touFlag == 8">安装记录详情</span>
                    <span v-else-if="touFlag == 9">佣金记录</span>
                    <span v-else-if="touFlag == 10">我的邀请码</span>
                    <span v-else-if="touFlag == 11">重置密码</span>
                    <van-icon name="cross" @click="popTou" class="closeIcon"></van-icon>
                </div>
                <div class="tabBarBox" v-show="touFlag == 3">
                    <div @click="changeTab(0)" :class="activeFlag == 0 ? 'activeTab' : ''">未审核</div>
                    <div @click="changeTab(1)" :class="activeFlag == 1 ? 'activeTab' : ''">已审核</div>
                </div>
                <!-- 我的投放记录 -->
                <div class="resBox resBox1" v-show="touFlag == 3">
                    <template v-if="putList.length != 0">
                        <div class="putBox" v-for="(   item, index   ) in    putList   " :key="index">
                            <div class="putTop" @click="checkDetail(index, 'myShopList')">
                                <span :class="item.isPut != 0 ? '' : 'redTip'"> {{ item.isPut != 0 ? '已通过' : '审核中'
                                    }}</span>
                                <div>
                                    <span>投放详情</span>
                                </div>
                            </div>
                            <div class="putTimeBox">
                                <div class="putItem">
                                    <div>
                                        <img src="../../assets/advMobile/geren/money.png" alt="">
                                        预算：
                                    </div>
                                    <span>{{ item.putMoney }}元</span>
                                </div>
                                <div class="putItem">
                                    <div>
                                        <img src="../../assets/advMobile/geren/saveTime.png" alt="">
                                        提交时间：
                                    </div>
                                    <span>{{ item.putDate.split(' ')[0] }}</span>
                                </div>
                                <div class="putItem">
                                    <div>
                                        <img src="../../assets/advMobile/geren/startTime.png" alt="">
                                        开始时间：
                                    </div>
                                    <span>{{ item.startTime }}</span>
                                </div>
                                <div class="putItem">
                                    <div>
                                        <img src="../../assets/advMobile/geren/endTime.png" alt="">
                                        结束时间：
                                    </div>
                                    <span>{{ item.endTime }}</span>
                                </div>
                            </div>
                            <div class="putConBox">
                                <div>
                                    <img src="../../assets/advMobile/geren/edit.png" alt="">
                                    投放内容：
                                </div>
                                <div>
                                    {{ item.putAdv }}
                                </div>
                            </div>
                            <div class="putConBox putConBox1">
                                <div>
                                    <img src="../../assets/advMobile/geren/edit.png" alt="">
                                    回执内容：
                                </div>
                                <div>
                                    {{ item.receiptContent || '请您留意客服回执' }}
                                </div>
                            </div>
                            <!-- v-if="userTag==0&& item.isPut == 1" -->
                            <div class="putConBox putConBox1 btnConBox" v-if="userTag == 0">
                                <template v-if="item.isPut == 0 && item.payStatus != 1">
                                    <div class="qianBtn" @click="payHandle(item.recordId)">立即支付</div>
                                </template>
                                <template v-if="item.isPut == 1">
                                    <div class="yuConBox">
                                        <img src="../../assets/advMobile/geren/yu.png" alt="" v-if="!item.yuFlag">
                                        <img src="../../assets/advMobile/geren/yu2.png" alt="" v-if="item.yuFlag">
                                        <div>
                                            剩余天数： <span :class="item.yuFlag ? 'redNum' : 'greenNum'">{{ item.resNum
                                                }}天</span>
                                        </div>
                                    </div>
                                    <div class="qianBtn" @click="xuqianHandle(item)">一键续签</div>
                                </template>
                            </div>
                        </div>
                    </template>
                    <div v-else class="emptyBox">
                        <img src="../../assets/empty.png" alt="">
                    </div>
                </div>
                <div class="resBox" v-show="touFlag == 4">
                    <div class="resTop">
                        <div>
                            <span>店铺列表</span>
                            <div> <img src="../../assets/advMobile/shopDetail/shopName.png" alt="">共计店铺</div>
                            <span>{{ myTouShopList.length }}家</span>
                        </div>
                    </div>
                    <div class="myTabBox">
                        <div class="myTabTop">
                            <div>店铺名称</div>
                            <div class="areaWidth">区域</div>
                            <div>位置</div>
                            <div class="statusWidth">状态</div>
                            <div>操作</div>
                        </div>

                        <template v-if="myTouShopList.length != 0">
                            <div class="myTabMain" v-for="(    item, index    ) in     myTouShopList    " :key="index">
                                <div>{{ index + 1 }}.{{ item.shopName }}</div>
                                <div class="areaWidth">{{ item.shopRegion | getRegion }}</div>
                                <div>{{ item.shopAddr }}</div>
                                <div class="statusWidth"
                                    :class="item.shopStatus == 1 ? 'redNum' : item.shopStatus == 0 ? 'greenNum' : 'yellowNum'">
                                    {{ item.shopStatus == 1 ? '已投放' : item.shopStatus == 0 ? '未投放' :
                '已占用'
                                    }}
                                </div>
                                <div @click="checkDetail(index, 'shopDetail')">详情</div>
                            </div>
                        </template>
                        <div v-else class="emptyBox">
                            <img src="../../assets/empty.png" alt="">
                        </div>
                    </div>
                </div>

                <!-- 店铺详情 -->
                <div class="shopDetail" v-if="touFlag == 6">
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/shopName.png" alt="">
                            店铺名称
                        </div>
                        <div>{{ shopInfoDetail.shopName }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/tel.png" alt="">
                            第一印象
                        </div>
                        <div class="shopLable1">{{ shopInfoDetail.shopMainLabel || '暂未设置' }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/area.png" alt="">
                            所处区域
                        </div>
                        <div>{{ shopInfoDetail.shopRegion | getRegion }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/square.png" alt="">
                            店铺面积
                        </div>
                        <div>{{ shopInfoDetail.shopArea || '暂无信息' }}
                            <span v-if="shopInfoDetail.shopArea">
                                m<sup>2</sup>
                            </span>
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/address.png" alt="">
                            店铺地址
                        </div>
                        <div>{{ shopInfoDetail.shopAddr || '暂无信息' }}</div>
                    </div>
                    <div class=" detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/xiaoFei.png" alt="">
                            消费档次
                        </div>
                        <div>{{ shopInfoDetail.shopLevelText }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/renshu.png" alt="">
                            日平均人数
                        </div>
                        <div>
                            <div>{{ shopInfoDetail.shopDayNum }}人</div>
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/fenlei.png" alt="">
                            店铺桌数
                        </div>
                        <div>
                            <div>{{ shopInfoDetail.shopTables ? shopInfoDetail.shopTables + '桌' : "暂无信息" }}</div>
                        </div>
                    </div>
                    <div class=" detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/xingZhi.png" alt="">
                            店铺性质
                        </div>
                        <div>
                            <div v-for=" (   item, index   ) in    shopInfoDetail.targetList   " :key="index">{{ item
                                }}
                            </div>
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/status.png" alt="">
                            投放状态
                        </div>
                        <div
                            :class="shopInfoDetail.shopStatus == 1 ? 'redNum' : shopInfoDetail.shopStatus == 0 ? 'greenNum' : 'yellowNum'">
                            {{ shopInfoDetail.shopStatus == 1 ? '已投放' : shopInfoDetail.shopStatus == 0 ? '未投放' : '已占用'
                            }}
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/time.png" alt="">
                            投放时间
                        </div>
                        <div>{{ shopInfoDetail.startTime || '暂无数据' }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/resTime.png" alt="">
                            到期时间
                        </div>
                        <div>{{ shopInfoDetail.endTime || '暂无数据' }}</div>
                    </div>
                </div>

                <div class="resBox" v-show="touFlag == 7">
                    <div class="resTop">
                        <div>
                            <span>安装记录</span>
                            <div> <img src="../../assets/advMobile/shopDetail/shopName.png" alt="">共计安装</div>
                            <span>{{ userAnList.length }}次</span>
                        </div>
                    </div>
                    <div class="myTabBox">
                        <div class="myTabTop">
                            <div>店铺名称</div>
                            <div>主属性</div>
                            <div>门店状态</div>
                            <div>状态</div>
                            <div>操作</div>
                        </div>

                        <template v-if="userAnList.length != 0">
                            <div class="myTabMain" v-for="(    item, index    ) in     userAnList    " :key="index">
                                <div>{{ index + 1 }}.{{ item.shopName }}</div>
                                <div>{{ item.shopLabel }}</div>
                                <div>{{ item.shopStatus == 1 ? '营业中' : '已关闭' }}</div>
                                <div :class="item.visitApply == 2 ? 'redNum' : item.visitApply == 1 ? 'greenNum' : ''">
                                    {{
                item.visitApply == 2 ?
                    '已驳回' : item.visitApply == 1 ? '已审核' : '未审核' }}
                                </div>
                                <div @click="checkDetail(index, 'anDatail')">详情</div>
                            </div>
                        </template>

                        <div v-else class="emptyBox">
                            <img src="../../assets/empty.png" alt="">
                        </div>
                    </div>
                </div>

                <!-- 安装详情 -->
                <div class="shopDetail" v-if="touFlag == 8">
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/xingZhi.png" alt="">
                            安装图片
                        </div>
                        <div>
                            <img :src="anDatail.visitPic" alt="" @click="checkImg(anDatail.visitPic)">
                        </div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/shopName.png" alt="">
                            店铺名称
                        </div>
                        <div>{{ anDatail.shopName }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/area.png" alt="">
                            门店状态
                        </div>
                        <div>{{ anDatail.shopStatus == 1 ? '营业中' : '已关闭' }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/time.png" alt="">
                            安装时间
                        </div>
                        <div>{{ anDatail.visitDate || '暂无数据' }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/fenlei.png" alt="">
                            门店主属性
                        </div>
                        <div>{{ anDatail.shopLabel || '暂无数据' }}</div>
                    </div>
                    <div class="detailItem">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/xiaoFei.png" alt="">
                            可得佣金
                        </div>
                        <div>{{ anDatail.money || '暂无数据' }}</div>
                    </div>
                    <div class="detailItem" v-if="anDatail.visitApply == 2">
                        <div>
                            <img src="../../assets/advMobile/shopDetail/tel.png" alt="">
                            驳回原因
                        </div>
                        <div class="redNum">{{ anDatail.applyNote }}</div>
                    </div>
                </div>

                <!-- 佣金记录 -->
                <div class="resBox" v-show="touFlag == 9">
                    <div class="bottomBox">
                        <div class="itemBox">
                            <div>
                                <van-icon name="gold-coin" class="tipIcon" color="#333" />
                                账户余额
                            </div>
                            <span>{{ totalMoney }}元</span>
                        </div>
                        <div class="itemBox">
                            <div>
                                <van-icon class="tipIcon" color="#70a06a" name="smile" />
                                累计收益
                            </div>
                            <span>{{ getTotalMoney }}元</span>
                        </div>
                    </div>

                    <!-- 佣金记录 -->
                    <div class="moneyList" v-if="moneyList.length != 0">
                        <div class="moneyItem" v-for="(item, index) in moneyList" :key="index">
                            <div>
                                <span>{{ item.type == 0 ? '佣金' : '申请发放' }} </span>
                                <span>{{ item.applyDate }}</span>
                            </div>
                            <div>
                                <template v-if="item.type == 1">
                                    <span :class="item.applyStatus == 0 ? '' : 'greenNum'">
                                        {{ item.applyStatus == 0 ? '审核中' : '已发放' }}
                                    </span>
                                    <span :class="item.applyStatus == 0 ? '' : 'greenNum'">金额：{{ item.applyMoney
                                        }}元</span>
                                </template>
                                <template v-else>
                                    <span class="moneyNum">+{{ item.applyMoney }}元</span>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div v-else class="emptyBox">
                        <img src="../../assets/empty.png" alt="">
                    </div>
                </div>

                <!-- 我的邀请码 -->
                <div class="resBox" v-show="touFlag == 10">
                    <div class="codeBox">
                        <img class="codeImg" :src="path + 'xiuzheng/er/' + erUrl" alt="">
                    </div>
                </div>
                <!-- 重置密码 -->
                <div class="resBox" v-show="touFlag == 11">
                    <div class=" infoTop">
                        <div>完善信息</div>
                        <div>
                            <div>
                                <img src="../../assets/advMobile/info/send.png" alt="">
                                原始密码
                            </div>
                            <input type="number" v-model="passForm.oldPass" placeholder="请输入旧密码">
                        </div>
                        <div>
                            <div>
                                <img src="../../assets/advMobile/info/send.png" alt="">
                                新密码
                            </div>
                            <input type="number" v-model="passForm.newPass" placeholder="请输入新密码">
                        </div>
                    </div>
                </div>
                <div class="touBtnBox" v-if="touFlag == 11">
                    <div>
                        <div @click="savaPass" class="subBtn">
                            提交
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div :class="showCalendar ? 'calendarBox' : 'hidencalendarBox'">
            <div :class="showCalendar ? 'showCale' : 'hidenCale'">
                <van-icon name="cross" @click="closeCalendar" class="closeCaleIcon"></van-icon>
                <van-calendar color="#1989fa" title='投放时间' :min-date="minDate" :max-date="maxDate" type="range" round
                    :poppable="false" @confirm="onConfirm" />
            </div>
        </div>



    </div>
</template>

<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>


import {updatePass, listMyUserPut, listMyPutShop,payOrder,shopVisitCount,UserBalance,commitCommission,MylistCommission,MyBalanceList,addOrder,listUserImg } from '../../network/mobile'

import { conditionList } from '../../utils/conditionList'

import { getSaleUserOrder } from '../../network/auditing'


import {
    listSetting,
} from "../../network/pc";
export default {
    name: 'HomeR',
    data() {
        return {
            path : "https://www.ccclkj.cn/zhibanzhang/resource/",
            // path : "https://zbz-imgs.oss-cn-beijing.aliyuncs.com/",
            sheetDia: false,// 投放弹窗
            // 3 我的投放记录
            // 4 我的投放门店
            // 6 店铺详情
            touFlag: 3,
            shopInfoDetail: '',//店铺详情
            myTouShopList: [],//  我的投放门店列表
            putList: [],//意向单列表
            oldPutList: [],//全部意向单列表
            recordId: 0,// 查看投放记录详情id
            userName: localStorage.user ? JSON.parse(localStorage.user).userName : '',
            userTag: localStorage.userTag,// -3 施工员  -2 推广员  0 用户

            activeFlag: 0,// 0 审核中  1 审核通过


            deposit: '',
            earlyWarning: '',

            userAnList:[],// 施工员安装列表
            anDatail:'',  // 安装详情
            moneyList:[],//佣金全部记录


            shopTotal:0,//总安装门店数
            totalMoney:0,  // 账户余额
            getTotalMoney:0,//累计获得金额
            userInfo:{},
            showCalendar: false,//时间选择弹窗
            minDate: new Date(),
            maxDate: new Date(2030, 0, 31),

            selectRecord:'',//续签的单子

            erUrl:'',//二维码
            passForm:{   // 修改密码
                oldPass:'',
                newPass:'',
            },

        }
    },
    mounted() {
        this.setTitle()
    },
    methods: {

        clearHandle(){
            // localStorage.clear()
        },
        
        changeTab(flag) {
            this.activeFlag = flag

            this.putList = this.oldPutList.filter(item => {
                return item.isPut == flag
            })
            this.putList.sort((a, b) => {
                return b.recordId - a.recordId;
            })

            console.log( this.putList);
        },

        beApartDays(Date_start, Date_end = new Date()) {
            // 时间格式化
            let date1 = new Date(Date_start);
            let date2 = new Date(Date_end);
            date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
            date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
            //目标时间减去当前时间
            const diff = date1.getTime() - date2.getTime();
            //计算当前时间与结束时间之间相差天数
            return Math.abs(diff) / (24 * 60 * 60 * 1000);
        },


        // 获取安装记录
        getuserData(flag){
            if(flag=='anZhuang'){
                this.touFlag=7
            this.sheetDia=true
            }else if(flag=='money'){
                this.touFlag=9
                this.sheetDia=true
            }

            

            console.log(this.touFlag);

        },

        getMyList() {
            if (this.userTag == -2) {  //推广员
                getSaleUserOrder({
                    promoterId: localStorage.userId
                }).then(res => {
                    if (res.flag) {

                        res.data.forEach(item => {
                            item.resNum = null

                            item.yuFlag = false// 意向单店铺状态   false 正常    true 预警

                            if (item.endTime != null) {
                                item.resNum = this.beApartDays(item.endTime)
                                item.yuFlag = item.resNum < this.earlyWarning
                            }
                        })

                        this.oldPutList = JSON.parse(JSON.stringify(res.data))
                        console.log(res);
                        this.touFlag = 3
                        this.sheetDia = true
                        this.putList = this.oldPutList.filter(item => {
                            return item.isPut == 0
                        })
                        this.putList.sort((a, b) => {
                            return b.recordId - a.recordId;
                        })
                    }
                })
            } else {  //用户
                if(localStorage.userId==undefined){
                    this.touFlag = 3
                    this.sheetDia = true
                    this.putList=[]
                    return
                }
                listMyUserPut({
                    userId: localStorage.userId
                }).then(res => {
                    if (res.flag) {
                        console.log(res);

                        res.data.puts.forEach(item => {
                            item.resNum = null

                            item.yuFlag = false// 意向单店铺状态   false 正常    true 预警

                            if (item.endTime != null) {
                                item.resNum = this.beApartDays(item.endTime)
                                item.yuFlag = item.resNum < this.earlyWarning
                            }
                        })
                        this.oldPutList = JSON.parse(JSON.stringify(res.data.puts))
                        this.touFlag = 3
                        this.sheetDia = true
                        this.putList = this.oldPutList.filter(item => {
                            return item.isPut == 0
                        })
                        this.putList.sort((a, b) => {
                            return b.recordId - a.recordId;
                        })
                    }
                })
            }

            console.log( this.putList);
            
        },


        // 业务员重置密码
        resCode(){
            this.sheetDia=true
            this.touFlag=11
        },

        // 保存密码
        savaPass(){
            if(this.passForm.oldPass==''){
                this.$message.warning('请输入原始密码')
                return
            }
            if(this.passForm.oldPass!=localStorage.userPassword){
                this.$message.warning('原始密码输入有误，请检查')
                return
            }
            if(this.passForm.newPass==''){
                this.$message.warning('请输入新密码')
                return
            }
            if(this.passForm.newPass.length<6){
                this.$message.warning('新密码长度最少为6位')
                return
            }

            console.log(this.passForm);

        

            updatePass({
                userId:localStorage.userId,
                pass:this.passForm.newPass
            }).then(res=>{
                if(res.flag){
                    this.$confirm('密码修改成功，请重新登陆?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showCancelButton:false,
                    showClose:false,
                    closeOnClickModal:false,
                    type: 'warning'
                    }).then(() => {
                        localStorage.clear()
                        this.$router.replace('/login')
                    }).catch(() => {
                    });
                }else{
                    this.$message.warning('修改失败，请重试')
                }
            })
        },
        // 查看店铺详情
        checkDetail(index, flag) {
            if (flag == 'myShopList') {
                // 根据记录获取投放门店列表
                this.recordId = this.putList[index].recordId
                this.getShopList()
            } else if (flag == 'shopDetail') {
                this.shopInfoDetail = this.myTouShopList[index]
                this.touFlag = 6
            }else if(flag=='anDatail'){
    
                this.anDatail=this.userAnList[index]
                this.touFlag = 8
        
                console.log(  this.anDatail);
            }
        },


        // 根据id 获取投放门店
        getShopList() {
            listMyPutShop({
                recordId: this.recordId
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.dataHandle(res.data)
                } else {
                    this.$message.warning('查询失败，请重试')
                }
            })
        },


        // 关闭投放弹窗
        popTou() {
            if (this.touFlag == 6) {
                this.touFlag = 4
            } else if (this.touFlag == 4) {
                this.touFlag = 3
            } else if(this.touFlag==8){
                this.touFlag=7
            } else {
                this.sheetDia = false
            }

        },
        popN() {
        },
        toPage() {
            if(this.userTag==-3){
                this.$router.replace('/advertising')
            }else{
                this.$router.replace('/index')
            }
        },
        setTitle() {
            document.title = '我的'
            const i = document.createElement('iframe')
            i.src = '/favicon.ico'
            i.style.display = 'none'
            i.onload = function () {
                setTimeout(function () {
                    i.remove()
                }, 9)
            }
            document.body.appendChild(i)
        },

        dataHandle(allShopList) {
            console.log(allShopList);
            this.myTouShopList = []
            allShopList.forEach((ele, index) => {
                ele.resNum = null
                ele.shopTarget = ele.shopTarget.split(',')
                ele.targetList = []
                ele.shopLevelText = ''
                ele.shopTarget.forEach((target) => {
                    conditionList[1].list.forEach(con => {
                        if (target == con.targetId) {
                            ele.targetList.push(con.text)
                        }
                    })
                })
                conditionList[2].list.forEach(level => {
                    if (ele.shopLevel == level.levelId) {
                        ele.shopLevelText = level.text
                    }
                })
                if (ele.endTime != null) {
                    ele.resNum = this.beApartDays(ele.endTime)
                }
                ele.shopLevel = Number(ele.shopLevel)
            })
            this.myTouShopList = [...allShopList]

            // 门店列表
            this.touFlag = 4

            console.log(this.myTouShopList);

        },
        getSettingList() {
            listSetting().then(res => {
                console.log(res);
                this.deposit = res.data.deposit
                this.earlyWarning = res.data.earlyWarning
            });
        },

        
        getUserMoney(){
            UserBalance({
                userId: localStorage.userId
            }).then(res=>{
                if(res.flag){
                    this.totalMoney=res.data
                }
            })
        },
        
        // 提交提现申请
        tiHandle(){
            this.$confirm('待公司核对后将为您发放佣金?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                    }).then(() => {

                        commitCommission({
                            userId:localStorage.userId,
                            applyMoney:this.totalMoney
                        }).then(res=>{
                            if(res.flag){
                                this.totalMoney=0
                                this.$message.success('提交成功，请耐心等待')
                                this.getMyComm()
                            }else{
                                this.$message.warning('申请失败，请重试')
                            }
                        })
                
                    }).catch(() => {
                    });


        },
        shopVisitList(){
            shopVisitCount({
                userId:localStorage.userId
            }).then(res=>{
                console.log(res);
                if(res.flag){
                    this.userAnList= res.data.shopVisit
                    this.userAnList.sort((a, b) => {
                            return Date.parse(b.visitDate) - Date.parse(a.visitDate);
                        })
                    this.shopTotal=this.userAnList.length

                }
            })
        },

        // 获取佣金申请记录
        getMyComm(){
            MylistCommission({
                userId:localStorage.userId
            }).then(res=>{
                if(res.flag){
                    this.getTotalMoney=0
                    res.data.forEach(item=>{
                        item.type=1
                        if(item.applyStatus==1){
                            this.getTotalMoney+=item.applyMoney
                        }
                    })
                    this.moneyList=res.data
                    console.log(  this.moneyList);
                    this.getMyRu()
                }
            })
        },

        getMyRu(){
            MyBalanceList({
                userId:localStorage.userId
            }).then(res=>{
                if(res.flag){
                    res.data.forEach(item=>{
                        this.moneyList.push({
                            type:0,
                            applyDate:item.visitDate,
                            applyMoney:item.money
                        })
                    })
                    console.log(this.moneyList);
                    this.moneyList.sort((a, b) => {
                            return Date.parse(b.applyDate) - Date.parse(a.applyDate);
                        })

                    console.log(this.moneyList);
                }
            })
        },

        xuqianHandle(obj){
            console.log(obj);
            this.$confirm(`是否续签?`, '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var form = {
                    userId: this.userInfo.userId,
                    userName: this.userInfo.userName,
                    userTel: this.userInfo.userTel,
                    openId: localStorage.openId,
                    promoterId: obj.promoterId,
                    userPut: {
                        userId: this.userInfo.userId,
                        putMoney: obj.putMoney,
                        putAdv: obj.putAdv,
                        isPut: 0,
                        shopId: obj.shopId,
                        startTime: obj.startTime,
                        endTime: obj.endTime,
                        shopTotal: obj.shopTotal,
                        promoterId: obj.promoterId,
                    }
                }
                this.selectRecord=form
                this.showCalendar=true
            })
        },
        // 提交续签请求
        addXuOrder(){
            addOrder(this.selectRecord).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.$message.success('信息提交成功')
                    this.$confirm(`您还需支付${this.deposit}元?`, '提示', {
                        confirmButtonText: '立即支付',
                        cancelButtonText: '稍后支付',
                        type: 'warning'
                    }).then(() => {
                        this.payHandle(res.data.recordId)
                    }).catch(() => {
                        this.getMyList()
                        this.activeFlag=0
                    });
                } else {
                    this.$message.warning('信息提交失败，请重试')
                }
            })
        },

        // 获取我的二维码
        getMyCode(){
            if(this.erUrl!=''){
                this.sheetDia=true
                    this.touFlag=10
            }else{
                listUserImg({
                    userId:localStorage.userId
                }).then(res=>{
                    if(res.flag){
                        if(res.data==null){
                            this.$message.warning('获取失败，请联系管理员')
                            return
                        }
                        this.erUrl=res.data.userImg
                        this.sheetDia=true
                        this.touFlag=10
                    }else{
                        this.$message.warning('获取失败，请联系管理员')
                    }
                })
            }
        },

          // 支付定金
          payHandle(id){
            payOrder({
                recordId:id,
                payMoney:this.deposit,
                openId: localStorage.openId,
            }).then(res=>{
                if(res.flag){
                    this.onBridgeReady(res.data)
                }
            })
        },
        wxPayHandle() {
            // 检测支付环境中的 WeixinJSBridge
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                this.onBridgeReady();
            }
        },
        onBridgeReady(data) {
            var that=this
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                    "appId": data.appId, //公众号名称，由商户传入
                    "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                    "nonceStr": data.nonceStr, //随机串
                    "package": data.package,
                    "paySign": data.paySign, //微信签名
                    "signType": data.signType //微信签名方式：
                },
                    function (res) {
                        // 支付成功
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            that.$message.success('支付成功')
                            that.getMyList()
                            that.activeFlag=0
                        }
                        // 支付过程中用户取消
                        if (res.err_msg == "get_brand_wcpay_request:cancel") {
                            that.$message.warning('您已取消支付')
                        }
                        // 支付失败
                        if (res.err_msg == "get_brand_wcpay_request:fail") {
                            that.$message.warning('支付失败')
                        }
                        if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
                        }
                    });
            },
        onConfirm(e) {
            this.selectRecord.userPut.startTime = this.getTime(e[0])
            this.selectRecord.userPut.endTime = this.getTime(e[1])
            console.log(this.selectRecord);
            this.$forceUpdate()
            this.closeCalendar()
            this.addXuOrder()
        },

        closeCalendar() {
            this.showCalendar = false
        },
        getTime: function (str) {
            var date = new Date(str)
            var year = date.getFullYear()
            var month = this.add0(date.getMonth() + 1)
            var day = this.add0(date.getDate())
            var hours = this.add0(date.getHours())
            var min = this.add0(date.getMinutes())
            var se = this.add0(date.getSeconds())
            // var str = year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + se
            var str = year + '-' + month + '-' + day
            return str
        },
        add0: function (m) {
            return m < 10 ? '0' + m : m
        },


        checkImg(url){
            var arr=[]
            arr.push(url)
            console.log(arr);
            ImagePreview(arr);

        },
    },
    created() {
        this.getSettingList()
        if(this.userTag==-3){
            this.shopVisitList()
            this.getUserMoney()
            this.getMyComm()
        }

        if (localStorage.user) {
            var user = JSON.parse(localStorage.user)
            this.userInfo.userId = user.userId
            this.userInfo.userName = user.userName
            this.userInfo.userTel = user.userTel
        }
    },

    filters: {
        getRegion(val) {
            var name = ''
            conditionList[0].list.forEach(item => {
                if (val == item.regionId) {
                    name = item.text
                }
            })
            return name
        }
    }

}






</script>

<style lang='less' scoped>
.topBox {
    position: fixed;
    top: -2825px;
    left: -1125px;
    width: 3000px;
    height: 3000px;
    background: #FFFFFF;
    border-radius: 50%;
}

.userInfo {
    margin: 90px 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: bold;
    font-size: 36px;
    color: #333333;

}

.userInfo>img {
    position: relative;
    margin-bottom: 20px;
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #fff;
    z-index: 2;
}


.navItemBox {
    display: flex;
    margin: 0 auto 40px;
    width: 690px;
    height: 162px;
    background: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(51, 51, 51, 0.08);
    border-radius: 18px;
    font-family: Source Han Sans CN;
}

.navItemBox>div {
    box-sizing: border-box;
    padding: 48px 40px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 28px !important;
    color: #333333 !important;
}

.navItemBox>div>div {
    display: flex;
    flex-direction: column;
}

.navItemBox>div>div>span:last-child {
    font-weight: 400;
    font-size: 20px;
    color: #858B90;
}

.navImgBox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
    width: 64px;
    height: 64px;
    background: rgba(242, 246, 255, .9);
    border-radius: 16px;
}

.navImgBox1 {
    background: rgba(250, 245, 238, .8);
}

.navImgBox2 {
    background: rgba(255, 245, 244, .8);
}

.navItemBox>div>div>img {
    width: 38px;
    height: 38px;
}

.navItemBox>div:last-child {
    font-weight: 400;
    font-size: 20px;
    color: #858B90;
}









.pageCon {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: #EEF1F7;
    overflow: scroll;
}


.pageBottomBox {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: auto
}

.navBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 750px;
    height: 98px;
    background: #FFFFFF;
    border-top: 2px solid #f2f2f2;
    z-index: 10;

}



.navBox>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 22px;
    color: #9A9A9A;
}

.navBox>div>img {
    margin-bottom: 4px;
    width: 42px;
    height: 38px;
}

.navBox>div:last-child>img {
    margin-bottom: 4px;
    width: 36px;
    height: 42px;
}

.navBox>div:first-child {
    color: #333;
}




.touBox {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #3C80DE;
    background-color: rgba(0, 0, 0, .3);
    z-index: 40;
    overflow: hidden;
}

.hidenTouBox {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100vw;
    height: 0px;
    z-index: 40;
    overflow: hidden;
    transition: height .2s;
}

.touBox>div {
    height: calc(100vh - 486px);
    transition: height .2s;
}

.hidenTouBox>div {
    height: 0px;
    transition: height .2s;
}

.touCon {
    position: absolute;
    bottom: 0px;
    width: 750px;
    height: calc(100vh - 242px) !important;
    background: #FFFFFF;
    border-radius: 30px 30px 0px 0px;
    transition: height .2s;
}

.resultCon {
    background-color: #fafafa;
    height: calc(100vh - 486px) !important;
}

.touTop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 110px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 32px;
    color: #000000;
}

.closeIcon {
    position: absolute;
    top: 40px;
    right: 38px;

}

.closeCaleIcon {
    position: absolute;
    top: 26px;
    right: 38px;
    font-size: 32px
}


.resBox {
    position: relative;
    display: flex;
    flex-direction: column;

    box-sizing: border-box;
    padding: 0px 30px 10px;
    width: 100%;
    // height: calc(100% - 240px);
    height: calc(100% - 134px) !important;

    overflow-y: scroll;
}

.resBox1 {
    padding-top: 120px !important;
}

.resTop {
    width: 690px;
    background: #FAFAFA;
    border-radius: 20px 20px 0px 0px;
}

.resTop>div:first-child {
    box-sizing: border-box;
    padding: 40px 0 28px 40px;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 2px solid rgba(153, 153, 153, .07);
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.resTop>div:first-child>div {
    display: flex;
    align-items: center;
    margin: 30px 0px 20px;
}

.resTop>div:first-child>div>img {
    margin-right: 12px;
    width: 26px;
    height: 26px;
}

.resTop>div:first-child>span:last-child {
    font-size: 36px !important;
    font-weight: bold !important;
}



.myTabBox {
    position: relative;
    margin-top: 30px;
    box-sizing: border-box;
    width: 100%;
    // height: 893px;
    flex: 1;
    border-radius: 20px;
    border: 2px solid #FAFAFA;
    overflow-y: scroll;
    z-index: 40;
}

.myTabBox>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30px;
}

.myTabTop {
    position: sticky;
    top: -2px;
    width: 100%;
    height: 72px;
    background: #FAFAFA;
    border-radius: 20px 20px 0px 0px;
    font-weight: 400;
    font-size: 28px;
    color: #999999;
}


.myTabTop>div:first-child,
.myTabMain>div:first-child {
    width: 170px;
}

.myTabTop>div:nth-child(2),
.myTabMain>div:nth-child(2) {
    width: 180px;
}

.myTabTop>div:nth-child(3),
.myTabMain>div:nth-child(3) {
    width: 120px;
    text-align: center;
    // background-color: #03C295;
}

.myTabTop>div:nth-child(4),
.myTabMain>div:nth-child(4) {
    width: 112px;
    text-align: center;
}

.myTabTop>div:nth-child(5),
.myTabMain>div:nth-child(5) {
    text-align: right;
    width: 60px;
}

.myTabMain>div {
    padding: 28px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: 24px;
    color: #333333;
}

.myTabMain>div:not(:last-child) {
    border-bottom: 2px solid #fafafa;
}

.myTabMain>div:nth-child(5) {
    color: #3C80DE !important;
}

.redNum {
    color: #C20330 !important;
}

.greenNum {
    color: #03C295 !important;
}

.yellowNum {
    color: #F6C349 !important;
}

.shopDetail {
    box-sizing: border-box;
    padding: 0 30px;
    width: 100%;
    height: calc(100% - 110px);
    overflow-y: scroll;
    // background-color: #3C80DE
}

.detailItem {
    display: flex;
    align-items: center;
    padding: 40px 0px;
    width: 100%;

}

.detailItem>div:first-child {
    display: flex;
    align-items: center;
    width: 246px;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.detailItem>div:first-child>img {
    margin-right: 22px;
    width: 38px;
    height: 38px;
}

.detailItem>div:last-child {
    position: relative;
    flex: 1;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.detailItem>div:last-child>img {
    width: 100px;
    height: 100px;
}

.detailItem>div:last-child>span {
    position: absolute;
    right: 0px;
    font-weight: 400;
    font-size: 30px;
    color: #CCCCCC;
}

.detailItem:not(:last-child) {
    border-bottom: 2px solid rgba(153, 153, 153, .07);
}




.emptyBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: 28px;
}

.emptyBox>img {
    margin-top: 200px;
    width: 374px;
    height: 314px;
}


.putBox {
    position: relative;
    margin-bottom: 20px;
    width: 681px;
    background: #FFFFFF;
    box-shadow: 0px 1px 6px 0px rgba(51, 51, 51, 0.12);
    border-radius: 16px;
}

.redTip {
    color: #F97676 !important;
}

.putTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 30px 20px 36px;
    width: 100%;
    border-bottom: 1px dashed rgba(153, 153, 153, .15);
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #999999;
}

.putTop>div {
    color: #3D80DD;
}

.putTop>div>span:last-child {
    margin-left: 20px
}

.qianBtn {
    width: 182px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(146deg, #2b73f8, #063ed6);
    box-shadow: 0px 2px 6px 0px rgba(51, 51, 51, 0.08);
    border-radius: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px !important;
    color: #FFFFFF !important;
}

.putTimeBox {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 30px;
    width: 100%;
    border-bottom: 1px dashed rgba(153, 153, 153, .15);
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #333333;
}


.putItem {
    display: flex;
    align-items: center;
    width: 50%;

}

.putItem:not(:nth-child(n+3)) {
    margin-bottom: 24px;
}

.putItem>div {
    display: flex;
    align-items: center;
}

.putItem>div>img {
    margin-right: 14px;
    width: 28px;
    height: 28px;
}

.putItem>span {
    color: #858B90;
}

.putConBox1 {
    border-top: 1px dashed rgba(153, 153, 153, .15);
}

.putConBox {
    box-sizing: border-box;
    padding: 22px 12px 30px 34px;
    width: 100%;
}

.putConBox>div {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #333333;
}

.putConBox1>div {
    font-size: 28px;
}

.btnConBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.yuConBox {
    display: flex;
    align-items: center;
}

.yuConBox>img {
    margin-right: 16px;
    width: 36px !important;
    height: 26px !important;
}

.yuConBox>div {
    font-size: 24px;
    color: #333;
}

.yuConBox>div>span {
    font-size: 28px;
    font-weight: blod;

}

.putConBox>div:last-child {
    margin-top: 6px;
    color: #858B90;
    line-height: 32px;
}


.putConBox>div>img {
    width: 24px;
    height: 24px;
}

.tabBarBox {
    display: flex;
    align-items: center;
    position: absolute;
    top: 110px;
    width: 100%;
    height: 80px;
    background-color: #fff;
    z-index: 200;
    box-shadow: 0px 1px 6px 0px rgba(51, 51, 51, 0.12);
}

.tabBarBox>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    font-size: 28px;
    color: #666;
}

.activeTab {
    position: relative;
    font-size: 32px !important;
    color: #333 !important;
    font-weight: bold;
}

.activeTab::after {
    position: absolute;
    bottom: 8px;
    content: '';
    width: 60px;
    height: 4px;
    background-color: #3C80DE;
    border-radius: 40px;
}


.dataBox {
    margin: 0px auto 40px;
    width: calc(100% - 60px);
    background-color: #fff;
    border-radius: 20px;
}

.dataTop {
    box-sizing: border-box;
    padding: 0 30px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 86px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 28px;
    color: #333333;
    border-bottom: 2px solid #f2f2f2;

}

.dataTop>img {
    margin-right: 12px;
    width: 32px;
    height: 32px
}

.dataCon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 26px 30px 64px;
    width: 100%;

}

.dataCon>div {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #999999;
}

.dataCon>div>span {
    margin-top: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 40px;
    color: #333333;
}

.shenqingBtn {
    position: absolute;
    bottom: 0px;
    right: -88px;
    color: #2b73f8 !important;
    font-size: 24px !important;
    text-decoration: underline;
}


.bottomBox {
    box-sizing: border-box;
    padding: 28px 28px 32px 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fafafa;
    border-radius: 32px;
}

.itemBox {
    margin-bottom: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: 32px;
    color: #333;
}

.itemBox>div {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 28px !important;
}

.bottomBox>.itemBox:first-child {
    // color: #70a06a;
    color: #333;
}


.bottomBox>.itemBox:nth-child(2) {
    color: #70a06a;
}

.tipIcon {
    font-size: 36px;
    margin-right: 10px;
}

.moneyList {
    width: 100%;
}

.moneyItem {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
    width: 100%;
    border-bottom: 2px solid #f2f2f2;
}

.moneyItem>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.moneyItem>div:first-child>span:last-child {
    margin-top: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #999999;
}

.moneyItem>div:last-child {
    align-items: end;
}

.moneyItem>div:last-child>span:last-child {
    margin-top: 14px;
}

.moneyNum {
    font-size: 32px !important;
    color: #c20330 !important;
}

.redNum {
    color: #C20330 !important;
}

.greenNum {
    color: #03C295 !important;
}

.codeBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 32px;
    color: #333;
    font-weight: bold;
}

.codeImg {
    width: 650px;
    height: 650px;
    border-radius: 20px;
}


.calendarBox {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 100vh;
    z-index: 50;
    background-color: rgba(0, 0, 0, .3);
}

.hidencalendarBox {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 0vh;
    z-index: 50;
    // background-color: rgba(0, 0, 0, .3);
    transition: height .3s;
}

.showCale {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 90%;
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    transition: height .3s;
}

.hidenCale {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 0%;
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    transition: height .3s;
}


.closeCaleIcon {
    position: absolute;
    top: 26px;
    right: 38px;
    font-size: 32px
}


.infoTop {
    box-sizing: border-box;
    padding: 36px 20px 14px;
    width: 100%;
    // height: 550px;
    background: #FFFFFF;
    border-radius: 30px;
}

.infoTop>div:first-child {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
}

.infoTop>div:first-child::after,
.infoTop>div:first-child::before {
    margin: 0 42px;
    content: '';
    width: 14px;
    height: 4px;
    background: #3D80DD;
    border-radius: 2px;
}

.infoTop>div:not(:first-child) {
    width: 100%;
    height: 106px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #f2f2f2;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28px;
    color: #333333;
}

.infoTop>div:not(:first-child)>div>img {
    margin-right: 16px;
    width: 26px;
    height: 27px;
}

.infoTop>div>input {
    width: 60%;
    text-align: right;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 26px;
    color: #666666;
    border: none;
}

.infoTop>div>input::-webkit-input-placeholder {
    font-size: 26px;
    color: #CCCCCC;
}

.infoTop>div:last-child {
    border-bottom: none;
}


.touBtnBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0px;
    width: 750px;
    height: 130px;
    background: #FFFFFF;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 0px 0px 0px 20px;
    z-index: 20;


}

.touBtnBox>div {
    box-sizing: border-box;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 690px;
    height: 86px;
    background: #3C80DE;
    box-shadow: 0px 1px 8px 0px rgba(51, 51, 51, 0.12);
    border-radius: 20px;
}

.touBtnBox>div>div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 32px;
    color: #FFFFFF;
}

.areaWidth {
    width: 100px !important;
}

.statusWidth {
    width: 130px !important;
}

.shopLable {
    color: #ff7a21;
    font-size: 18px;
}

.shopLable1 {
    color: #ff7a21 !important;
}
</style>